<template>
  <div class="root">
    <el-tabs v-model="activeName">
      <el-tab-pane label="个人资料" name="a"></el-tab-pane>
      <el-tab-pane label="修改密码" name="b"></el-tab-pane>
    </el-tabs>

    <el-card shadow="never" style="margin-top: 20px" v-if="activeName == 'a'">
      <div class="formBox">
        <div class="headerBox">
          <div class="leftBox">
            <img
              src="../../../static/Imgs/userImg/ziUser.png"
              class="ziImg"
              alt=""
            />
            个人信息
          </div>
          <div
            class="rightBox"
            @click="
              $router.push({
                path: '/editData',
                query: {
                  id: userData.id,
                },
              })
            "
          >
            <i class="el-icon-edit"></i>
            编辑信息
          </div>
        </div>
        <div class="contengBox">
          <div class="phoneBox">
            <img
              v-if="userData.icon"
              :src="userData.icon"
              class="touxiangImg"
              alt=""
            />
            <img
              v-else
              src="../../../static/Imgs/userImg/touxiang.png"
              class="touxiangImg"
              alt=""
            />
            {{ userData.username }}
          </div>
          <div class="dataBox">
            <div class="data">
              <div class="newData">注册时间</div>
              {{ userData.createTime }}
            </div>
            <div class="data">
              <div class="newData">登录账号</div>
              {{ userData.username }}
            </div>
            <div class="data">
              <div class="newData">微信号</div>
              {{ userData.vxNumber ? userData.vxNumber : "未填写" }}
            </div>
            <div class="data">
              <div class="newData">QQ号</div>
              {{ userData.qqNumber ? userData.qqNumber : "未填写" }}
            </div>
            <div class="data">
              <div class="newData">手机号</div>
              {{ userData.phone ? userData.phone : "未填写" }}
            </div>
          </div>
        </div>
        <div class="headerBox marTop">
          <div class="leftBox">
            <img
              src="../../../static/Imgs/userImg/lvdizhi.png"
              class="ziImg"
              alt=""
            />
            收货地址
          </div>
        </div>

        <div class="newContent" v-if="tableData.length">
          <div
            class="btnBox"
            @click="addDZ"
            style="margin-top: 0; margin-bottom: 0.1rem"
          >
            新增地址
          </div>
          <el-table
            :data="tableData"
            header-cell-class-name="tableHeader"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="receiverName" label="收货人">
            </el-table-column>
            <el-table-column prop="receiverPhone" label="联系电话">
            </el-table-column>
            <el-table-column
              prop="receiverDetailAddress"
              :show-overflow-tooltip="true"
              label="地址"
            >
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="omsMemberAddress(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="newContent" v-else>
          <div class="titleBox">您还未设置收货地址</div>
          <div class="textBox">
            添加常用收货地址后，在平台下单时可以直接选择常用地址进行下单，提高下单效率。
          </div>
          <div class="btnBox" @click="addDZ">设置地址</div>
        </div>
      </div>
    </el-card>
    <div class="towBox" v-else>
      <div class="titleBox">修改登录密码</div>
      <div class="formBoxB">
        <el-form ref="formB" :rules="newrules" :model="form" label-width="auto">
          <el-form-item label="原密码：" prop="password">
            <el-input
              :type="flagType"
              v-model="form.password"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag()"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              :type="flagType1"
              v-model="form.newPassword"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag1
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag1()"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmpassword">
            <el-input
              :type="flagType2"
              v-model="form.confirmpassword"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag2
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag2()"
              ></i>
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <div class="redBtn" @click="updatePassword">确认修改</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">{{ title }}</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleFormS"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="解析地址：" style="display: flex">
              <el-input v-model="address"></el-input>
              <div class="btnBoxB" @click="expressAddressResolution">
                一件解析
              </div>
            </el-form-item>
            <el-form-item label="所在地区：" prop="arrValue">
              <el-cascader
                v-model="ruleForm.arrValue"
                :options="options"
                @change="handleChange"
                :props="{ value: 'name', label: 'name' }"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址：" prop="receiverDetailAddress">
              <el-input v-model="ruleForm.receiverDetailAddress"></el-input>
            </el-form-item>
            <el-form-item label="收货人：" prop="receiverName">
              <el-input v-model="ruleForm.receiverName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="receiverPhone">
              <el-input v-model="ruleForm.receiverPhone"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button type="primary" @click="collectionAddress" class="hongBtn">
          确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import md5 from "js-md5";
import {
  expressAddressResolution,
  selectAllAddress,
  selectMemberAddress,
  collectionAddress,
  omsMemberAddress,
} from "@/api/shopDetail";
import { getUserData, updatePassword } from "@/api/user";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    const mmreg = /(?=.*?[A-Z].*?)(?=.*?[a-z].*?)(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{12,12}/;
    const validatemm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!mmreg.test(value)) {
          callback(new Error("请输入12位，需包含大小写字母、数字以及字符"));
        }
        callback();
      }
    };
    const changePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.newPassword !== this.form.confirmpassword) {
          callback(new Error("两次密码不一致"));
        } else if (!mmreg.test(value)) {
          callback(new Error("请输入12位，需包含大小写字母、数字以及字符"));
        }
        callback();
      }
    };
    const sjhreg =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    const validatesjh = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!sjhreg.test(value)) {
        callback(new Error("请检查手机号码是否正确"));
      } else {
        callback();
      }
    };
    return {
      flag: false,
      flagType: "password",
      flag1: false,
      flagType1: "password",
      flag2: false,
      flagType2: "password",
      address: "",
      dialogVisible: false,
      activeName: "a",
      ruleForm: {
        receiverName: "",
        receiverDetailAddress: "",
        arrValue: [],
        receiverPhone: "",
      },
      options: [],
      form: {},
      tableData: [],
      title: "新增地址",
      rules: {
        arrValue: [
          { required: true, message: "请选择地区", trigger: "change" },
        ],
        receiverDetailAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        receiverName: [
          { required: true, message: "请输入收货人", trigger: "blur" },
        ],
        receiverPhone: [
        { required: true, validator: validatesjh, trigger: "blur" },
        ],
      },
      userData: {},
      newrules: {
        password: [{ required: true, validator: validatemm, trigger: "blur" }],
        newPassword: [
          { required: true, validator: validatemm, trigger: "blur" },
        ],
        confirmpassword: [
          { required: true, validator: changePassWord, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.selectMemberAddress();
    this.selectAllAddress();
    this.getUserData();
  },
  methods: {
    // 小眼睛切换状态
    getFlag() {
      this.flag = !this.flag;
      this.flagType = this.flag ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    getFlag1() {
      this.flag1 = !this.flag1;
      this.flagType1 = this.flag1 ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    getFlag2() {
      this.flag2 = !this.flag2;
      this.flagType2 = this.flag2 ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    //修改密码
    updatePassword() {
      this.$refs["formB"].validate((valid) => {
        if (valid) {
          let params = {
            telephone: this.userData.phone,
            password: this.form.password,
            newPassword: this.form.newPassword,
          };
          params.password = md5(params.password);
          params.newPassword = md5(params.newPassword);
          updatePassword(params).then((data) => {
            if (data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              removeToken();
              this.$router.push("/login");
            }
          });
        } else {
          return false;
        }
      });
    },
    // 获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
      });
    },
    //删除地址
    omsMemberAddress(row) {
      omsMemberAddress({
        idList: `${row.id}`,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.selectMemberAddress();
        }
      });
    },
    //编辑
    edit(row) {
      let newRow = JSON.parse(JSON.stringify(row));
      this.ruleForm = newRow;
      this.ruleForm.arrValue = [
        newRow.receiverProvince,
        newRow.receiverCity,
        newRow.receiverRegion,
      ];
      this.dialogVisible = true;
      this.title = "编辑地址";
    },
    //保存地址
    collectionAddress() {
      this.$refs["ruleFormS"].validate((valid) => {
        if (valid) {
          collectionAddress(this.ruleForm).then((data) => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.selectMemberAddress();
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    handleChange(val) {
      console.log(val);
      if (val.length) {
        this.ruleForm.receiverProvince = val[0];
        this.ruleForm.receiverCity = val[1];
        this.ruleForm.receiverRegion = val[2];
      }
    },
    //新增地址
    addDZ() {
      this.ruleForm = {
        receiverName: "",
        receiverDetailAddress: "",
        arrValue: [],
        receiverPhone: "",
      };
      this.title = "新增地址";
      this.dialogVisible = true;
    },
    //获取我的地址
    selectMemberAddress() {
      selectMemberAddress().then((data) => {
        this.tableData = data.data;
      });
    },
    //获取省市区地址
    selectAllAddress() {
      selectAllAddress().then((data) => {
        this.options = data.data;
      });
    },
    //解析地址
    expressAddressResolution() {
      if (this.address !== "") {
        expressAddressResolution({
          address: this.address,
        }).then((data) => {
          this.ruleForm.receiverName = data.data.name;
          this.ruleForm.receiverPhone = data.data.mobile;
          this.ruleForm.receiverDetailAddress = data.data.detail;
          this.ruleForm.receiverProvince = data.data.province;
          this.ruleForm.receiverCity = data.data.city;
          this.ruleForm.receiverRegion = data.data.district;
          this.ruleForm.arrValue = [
            data.data.province,
            data.data.city,
            data.data.district,
          ];
          this.$forceUpdate();
        });
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__content {
    display: none;
  }
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 5vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 5vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  /deep/ .el-input__suffix {
    right: -60px;
  }
  .formBox {
    .headerBox {
      display: flex;
      align-items: center;
      .leftBox {
        display: flex;
        align-items: center;
        font-size: 0.18rem;
        font-weight: 700;
        .ziImg {
          width: 0.2rem;
          height: 0.2rem;
          margin-right: 0.1rem;
        }
      }
      .rightBox {
        cursor: pointer;
        margin-left: 0.4rem;
        color: #666666;
        font-size: 0.12rem;
      }
    }
    .contengBox {
      padding: 0.2rem;
      background: #f5f7f9;
      border-radius: 10px;
      margin-top: 0.2rem;
      .phoneBox {
        display: flex;
        align-items: center;
        font-size: 0.18rem;
        font-weight: 700;
        .touxiangImg {
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.1rem;
          border-radius: 50%;
        }
      }
      .dataBox {
        display: flex;
        justify-content: space-between;
        margin-top: 0.18rem;
        .data {
          width: 20%;
          display: flex;
          .newData {
            margin-right: 0.2rem;
          }
        }
      }
    }
    .marTop {
      margin-top: 0.2rem;
    }
    .newContent {
      padding: 0.2rem;
      background: #f4f9ff;
      margin-top: 0.2rem;
      border-radius: 10px;
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .titleBox {
        font-size: 0.18rem;
        font-weight: 700;
      }
      .textBox {
        font-size: 0.1rem;
        margin-top: 0.1rem;
      }
      .btnBox {
        border-radius: 20px;
        border: 1px solid #e8e8e8;
        background: #fff;
        width: 0.7rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        margin-top: 0.1rem;
        cursor: pointer;
      }
    }
  }
  .titleBox {
    font-size: 0.18rem;
    font-weight: 700;
  }
  .formBoxB {
    margin-top: 0.2rem;
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 0.2rem;
    }
    /deep/.el-input__suffix {
      right: 5px;
    }
    /deep/ .el-input__inner {
      background-color: #f5f7f9;
      border: 1px solid #e8e8e8;
    }
    /deep/ .el-input {
      width: 3rem;
    }
    .uploadImg {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem 0;
      margin-top: 0.3rem;
    }
    .cententBox {
      color: #999999;
    }
    /deep/ .el-upload--picture-card {
      line-height: 0;
    }
    .redBtn {
      width: 0.9rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #e22a1f;
      color: #fff;
      border-radius: 20px;
      text-align: center;
      margin-left: 0.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .btnBox {
    width: 1.2rem !important;
  }
}
</style>
  